<%@ page language="java" pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基于XML，以POST方式，完成省份-城市二级下拉联动</title>
<script type="text/javascript">
	//选择的省的ID作为参数
	function findCityByProcince(provinceId) {
		//步骤1：获取选中的省的ID
		//通过ajax技术把省发送给后台
		var xhr = new XMLHttpRequest();
		console.log('program>>> xmlhttprequest对象创建成功');
		xhr.open('POST',
				'${pageContext.request.contextPath}/servlet/findcitybyprocinceservlet02?key01='
						+ new Date().getTime() + '')
		xhr.setRequestHeader('Content-Type',
				'application/x-www-form-urlencoded');
		console.log('program>>> xmlhttprequest设置参数成功');
		//后台代码通过省的名字，获取包含市 ,把包含的市返回给ajax
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {
					//1:西安|2:宝鸡|3:咸阳   接受到返回的内容
					var backContext = xhr.responseText;
					console.log('program>>> xmlhttprequest设获取返回的内容：'
							+ backContext + '。');
					console.log('program>>> 设置市下拉列表里的值开始……');
					//获取市下拉列表对象
					var citySelect = document.getElementById('cityID');
					//设置市下拉列表里只有一选项
					citySelect.length = 1;
					//切割返回内容  1:西安|2:宝鸡|3:咸阳    以|进行切割
					var regex = /\|/;
					var cityArray = backContext.split(regex);
					//数组里的元素为1:西安  等
					for (var index = 0; index < cityArray.length; index++) {
						var cityElement = cityContentArray[index];
						//1:西安
						regex = /:/;
						var cityContentArray = cityElement.split(regex);
						//该数组里就有两个元素  市的id和市的名字
						var optionElement = document.createElement('option');
						optionElement
								.setAttribute('value', cityContentArray[0]);
						optionElement.innerHTML = cityArray[1];
						citySelect.appendChild(optionElement);
					}
					console.log('program>>> 设置市下拉列表里的值 结束……');
				}
			}
		}
		//ajax把返回的内容显示在市区里
		xhr.send('provinceid=' + provinceId + '');
		console.log('program>>> xmlhttprequest发送请求成功');
	}
</script>
</head>
<body>
	<select id="provinceID" style="width: 111px"
		onchange="findCityByProcince(this.value)">
		<option value="0">选择省份</option>
		<c:forEach var='element' items="${allprovince }">
			<option value="${element.id }">${element.provinceName }</option>
		</c:forEach>
	</select> &nbsp;&nbsp;&nbsp;
	<select id="cityID" style="width: 111px">
		<option>选择城市</option>
	</select>
</body>
</html>